<template>
  <view class="container">
    <view class="back-btn" @click="navigateBack">←</view>
    <view class="register-box">
      <text class="title">注册</text>
      <!-- 新增昵称输入 -->
      <input 
        class="input" 
        placeholder="请输入昵称" 
        v-model="nickname"
      />
      <input 
        class="input" 
        placeholder="请设置用户名" 
        v-model="username"
      />
      <!-- 新增邮箱输入 -->
      <input 
        class="input" 
        placeholder="请输入邮箱" 
        v-model="email"
        type="email"
      />
      <!-- 新增电话输入 -->
      <input 
        class="input" 
        placeholder="请输入手机号" 
        v-model="phone"
        type="number"
      />
      <input 
        class="input" 
        placeholder="请设置密码（6-16位）" 
        password 
        v-model="password"
      />
      <input 
        class="input" 
        placeholder="请确认密码" 
        password 
        v-model="confirmPwd"
      />
      <button class="register-btn" @click="register">注册</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPwd: '',
      nickname: '', // 新增昵称字段
      email: '', // 新增邮箱字段
      phone: '' // 新增电话字段
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    },
    register() {
      // 表单验证（新增昵称、邮箱、手机号校验）
      if (!this.nickname.trim()) {
        return uni.showToast({ title: '请输入昵称', icon: 'none' })
      }
      if (!this.username.trim()) {
        return uni.showToast({ title: '请输入用户名', icon: 'none' })
      }
      // 邮箱格式校验（简单正则）
      const emailReg = /^[\w.-]+@[a-zA-Z0-9-]+\.[a-zA-Z]+$/
      if (!this.email.trim()) {
        return uni.showToast({ title: '请输入邮箱', icon: 'none' })
      }
      if (!emailReg.test(this.email.trim())) {
        return uni.showToast({ title: '邮箱格式不正确', icon: 'none' })
      }
      // 手机号格式校验（11位数字）
      const phoneReg = /^1[3-9]\d{9}$/
      if (!this.phone.trim()) {
        return uni.showToast({ title: '请输入手机号', icon: 'none' })
      }
      if (!phoneReg.test(this.phone.trim())) {
        return uni.showToast({ title: '手机号格式不正确', icon: 'none' })
      }
      if (!this.password) {
        return uni.showToast({ title: '请设置密码', icon: 'none' })
      }
      if (this.password.length < 6 || this.password.length > 16) {
        return uni.showToast({ title: '密码需为6-16位', icon: 'none' })
      }
      if (this.password !== this.confirmPwd) {
        return uni.showToast({ title: '两次密码不一致', icon: 'none' })
      }
      
      // 本地存储校验用户名唯一性（保持原有逻辑）
      const users = uni.getStorageSync('users') || []
      const hasUser = users.some(u => u.username === this.username.trim())
      if (hasUser) {
        return uni.showToast({ title: '用户名已存在', icon: 'none' })
      }
      // 新增手机号唯一性校验
      const hasPhone = users.some(u => u.phone === this.phone.trim())
      if (hasPhone) {
        return uni.showToast({ title: '手机号已被注册', icon: 'none' })
      }
      // 新增邮箱唯一性校验
      const hasEmail = users.some(u => u.email === this.email.trim())
      if (hasEmail) {
        return uni.showToast({ title: '邮箱已被注册', icon: 'none' })
      }
      
      // 显示加载状态
      uni.showLoading({ title: '注册中...' })
      
      // 调用云函数注册（新增传递昵称、邮箱、手机号参数）
      uniCloud.callFunction({
        name: 'addUser',
        data: {
          name: this.username.trim(), 
          password: this.password,
          nickname: this.nickname.trim(), // 新增昵称参数
          email: this.email.trim(), // 新增邮箱参数
          phone: this.phone.trim() // 新增手机号参数
        },
        success: (res) => {
          console.log('注册成功回调：', res)
          // 本地存储同步更新（新增字段存储）
          users.push({
            username: this.username.trim(),
            password: this.password,
            nickname: this.nickname.trim(),
            email: this.email.trim(),
            phone: this.phone.trim(),
            avatar: '/static/logo.png'
          })
          uni.setStorageSync('users', users)
          
          // 提示并返回上一页
          uni.showToast({
            title: '注册成功',
            icon: 'success',
            duration: 1500,
            success: () => {
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }
          })
        },
        fail: (err) => {
          console.error('注册失败：', err)
          uni.showToast({ title: '注册失败，请重试', icon: 'none' })
        },
        complete: () => {
          uni.hideLoading()
        }
      })
    }
  }
}
</script>

<style scoped>
.back-btn {
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  font-size: 40rpx;
  color: #333;
  z-index: 10; 
}

.container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 改为顶部对齐，避免内容溢出 */
  min-height: 100vh; /* 用最小高度替代固定高度，适配多输入框 */
  background-color: #f8f8f8;
  position: relative;
  padding: 80rpx 0 100rpx; /* 增加顶部内边距，避免被返回按钮遮挡 */
  box-sizing: border-box;
}

.register-box {
  width: 80%;
  padding: 50rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}

.title {
  display: block;
  text-align: center;
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
  color: #333;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  margin-bottom: 25rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
  font-size: 28rpx; 
}

.register-btn {
  width: 100%;
  height: 85rpx;
  background-color: #4e86fc;
  color: #fff;
  border-radius: 10rpx;
  margin-top: 20rpx;
  font-size: 30rpx;
}

/* 适配微信小程序按钮默认样式清除 */
.register-btn::after {
  border: none;
}
</style>